<style>
#app{display: table;width:100%;}
body{background: #fff;}

.withdrawalsmanage.login_content{    width: 1200px;margin:0 auto;
    height: 99.8vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/

    /*justify-content: center;*/
}

.withdrawalsmanage .el-input__inner{height:32px;}
.withdrawalsmanage .el-table td{padding:12px 0;}
.withdrawalsmanage .el-form--inline .el-form-item{margin-bottom: 0;}
.withdrawalsmanage .list_content{margin-bottom: 30px;}
.withdrawalsmanage .alt_item{border-top: 1px solid #dcdcdc;width: 100%;}
.withdrawalsmanage .alt_title{
	    font-size: 16px;
    color: #333;
    height: 40px;
    line-height: 40px;
}

.withdrawalsmanage .el-table th{text-align: left;}
.withdrawalsmanage .el-table{border:1px solid #ebeef5;margin-top: 10px;}
/*.withdrawalsmanage .el-table thead tr th{background: #f5f5f5;}*/
.withdrawalsmanage .el-dialog__wrapper{
	display: flex;
	align-items: center;
}
.withdrawalsmanage .el-dialog{width:434px;}
.withdrawalsmanage .dialog_alt{
	    margin-left: 130px;
    /*margin-top: 20px;*/
    /*margin-bottom: 5px;*/
    font-size: 12px;
    color: #f56c6c;
}
.withdrawalsmanage .form_part .el-input{width:314px;}
.withdrawalsmanage .form_part .el-input__inner{height:36px;}
.withdrawalsmanage .el-dialog__body{padding-top:10px;}
.withdrawalsmanage .btn_add .el-form-item__content{max-width: 324px;}
.withdrawalsmanage .coinsList{
	    margin: 0 auto;
    width: 1200px;
    margin-top: 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center; 
    flex-wrap: wrap;
}
.withdrawalsmanage .coins_item{
	    width: 107px;
    height: 45px;
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.withdrawalsmanage .coins_item_active,.withdrawalsmanage .coins_item:hover{
	    background: #37a6f3;
}
.withdrawalsmanage .coins_item img{
	    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.withdrawalsmanage  .add_addr{
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 150px;
    height: 50px;
    cursor: pointer;
    background: url(../assets/img/add-addr-bg.png);
    background-size: 100% 100%
}

</style>
<template>
  <div class="withdrawalsmanage">  
      
	<template v-if="routerPath=='withdrawalsmanage'" >

      <div class="login_content withdrawalsmanage">  
      		<div class="usercenter_all">
      			<div class="identity_header">      			
	      			<el-breadcrumb separator="/" class="bread" id="mybread">
				        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index" :to="item">
				          {{ item.meta.name || item.name }}
				        </el-breadcrumb-item>
				      </el-breadcrumb>
	      		</div>
  				
  			</div>   
      		<div class="usercenter_all">
      			<div class="coinsList">
      				<div :class="{coins_item:true,coins_item_active:item.isSelect}" v-for="item in coinList" @click="selectCoins(item)">
      					<img :src="item.iconResUrl">
      					<span>{{item.name}}</span>
      				</div>
      			</div>
      		</div>
       		<div class="usercenter_all">
       		
		    	<el-table  :data="walletList"   style="width: 100%" :ref="walletList" >
				    <el-table-column   prop="name"  label="备注" >
				    </el-table-column>
				    <el-table-column   prop="address" label="地址">
				    </el-table-column>				   
				  
				    <el-table-column label="操作">
			            <template slot-scope="scope">					       
			              <span class="span_btn span_btn_red"  @click="handleDel(scope.$index, scope.row)" >删除</span>				           
			             
			            </template>
		            </el-table-column>
			    </el-table>
			  	<div class="add_addr" @click="handleAdd">
			  	</div>
					  
       		</div>

      </div>
      	 <!-- 新增页面 -->
         <el-dialog :title="'添加'+selectCoinsName+'地址'" top="0"  class="form_part" :visible.sync="addFormVisible"  :close-on-click-modal="false">
	          <el-form :model="addForm" class="" label-width="85px" :rules="addFormRules" ref="addForm">
	            <!-- <div class="form_left"> -->
	            	<input type="hidden" v-model="selectCoinsId">
	              <el-form-item label="地址" prop="address">
	                <el-input v-model="addForm.address" placeholder="填写正确的接收地址" auto-complete="off"></el-input>
	              </el-form-item>
	              <el-form-item label="地址简称" prop="name">
	                <el-input v-model="addForm.name" placeholder="地址简称" auto-complete="off"></el-input>
	              </el-form-item>  				               
	              
	              <el-form-item label="交易密码:" prop="payPassword">
	                <el-input v-model="addForm.payPassword" placeholder="交易密码" auto-complete="off"></el-input>
	              </el-form-item>
          		  <el-form-item class="btn_add">
	                 <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">确认</el-button>
	              </el-form-item>
	           
	          </el-form>
	          <!-- <div slot="footer" class="dialog-footer">
	            <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">添加</el-button>
	           
	          </div> -->
        </el-dialog>
        <!-- 交易密码 -->
         <el-dialog title="填写交易密码" top="0"  class="form_part" :visible.sync="paypasswordVisible"  :close-on-click-modal="false">
            <el-form :model="paypasswordForm" class="" label-width="85px" :rules="paypasswordRules" ref="paypasswordForm">
                                  
                
                <el-form-item label="交易密码:" prop="payPassword">
                  <el-input v-model="paypasswordForm.payPassword" placeholder="交易密码" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item class="btn_add">
                   <el-button style="width:100%" type="primary"  @click.native="sureDel('paypasswordForm')" :loading="payLoading">确认</el-button>
                </el-form-item>
             
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">添加</el-button>
             
            </div> -->
        </el-dialog>
        
    </template>
    <template v-else>
        <router-view></router-view>
    </template>
    
    
   
  </div>
</template>

<script>
import * as users from '../api/users';
import * as currency from '../api/currency';
import md5 from 'js-md5';




var code ; //在全局定义验证码
export default {

  components:{
  },
  computed: {   
 	activeMenu: function(){
      // return this.$route.name
      return this.$route.path
    },
    breadcrumbs: function(){
      return (this.$route && this.$route.matched) || []
    }
  },
  data() {
    return {
    	note:'bj9w2',
    	coinList:[{isSelect:true,name:"btc",coinId:'1'},{isSelect:false,name:"ltc",coinId:'2'},{isSelect:false,name:"eth",coinId:'3'}],
    	selectCoinsName:'btc',
    	selectCoinsId:'1',
      payLoading:false,
    	addFormVisible:false,
    	addForm:{},
    	addFormRules:{
        address: [
            { required: true, message: '请输入钱包地址', trigger: 'blur' }
        ],
        name: [
            { required: true, message: '请输入地址简称', trigger: 'blur' }
        ],
        payPassword: [
            { required: true, message: '请输入交易密码', trigger: 'blur' }
        ],
        
    	},
      paypasswordVisible:false,
      paypasswordForm:{},
      paypasswordRules:{
         payPassword: [
            { required: true, message: '请输入交易密码', trigger: 'blur' }
        ],
      },
    	addLoading:false,
    	walletList:[],
    	isRecharge:true,
    	rechargeList:[],
    	withdrawList:[],
    	userId:'',
    	list:[{name:'btc',cid:'1'},{name:'btc',cid:'2'}],
    	showCount:20,
		  total:0,
    	page: 1,
    	loginFormRules:{
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
      },
      isBtnLoading: false,
      routerPath:'',
      isRealName:false,
      userInfo:'',
      paraDel:'',
     
    };
  },
 
  methods: {
  	selectCoins:function(row){
  		this.coinList.map(x=>{
  			x.isSelect=false
  		})
  		row.isSelect=true;
  		
  		this.selectCoinsName=row.name;
  		this.selectCoinsId=row.coinId;
  	},
  	handleAdd:function(){
  		this.addFormVisible=true;

  	},
    handleDel(index,row){
      //删除个人钱包
      this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.paypasswordVisible=true;
          this.paraDel={
              userWalletId: row.userWalletId,
              userId:this.userId,
          }
          
        }).catch(() => {

        });
    },
    sureDel(){
      this.$refs.paypasswordForm.validate((valid) => {

        if (valid) {
          this.payLoading = true;
        //NProgress.start();
        let para =this.paraDel;
        para.payPassword=this.paypasswordForm.payPassword;
   
         console.log(para)
          users.removeWallet.r(para).then((res)=>{
            console.log(res)
              if(res.data.retCode==1){
                this.$message("删除成功");
                this.paypasswordVisible=false;

                  this.fetchData();
              }else{
                this.$message.error(res.data.retMsg);
              }
              this.payLoading = false;

          })
        }else{
          console.log('error submit!!');
          return false;
        }

      })


        
    },
    addSubmit(){
      //添加提币地址
      this.$refs.addForm.validate((valid) => {
        if (valid) {
      
          this.addLoading=true;
          let para={
            userId:this.userId,
            coinId:this.selectCoinsId,
            name:this.addForm.name,
            address:this.addForm.address,
            // payPassword:md5('STARSAND_' + this.addForm.payPassword),
            payPassword:this.addForm.payPassword,
            
          }
          console.log(para);
          // return;
          users.addWallet.r(para).then((res)=>{
            console.log(res);
            if(res.data.retCode==1){
              this.addFormVisible=false;
              this.$message("添加成功")
              this.fetchData();
            }else{
              this.$message.error(res.data.retMsg);
            }
            this.addLoading=false;
          })

        }else{
          console.log('error submit!!');
          return false;
        }

      })

    },
    fetchDataUser(){
    	//获取用户信息
    	let para={
    		userId:this.userId,
    	}
	  	users.info.r(para).then((res) => {
	  		console.log(res)
	  		if(res.data.retCode==1){
	  			if(res.data.data.realName){
  					this.isRealName=true;
  				}else{
  					this.isRealName=false;
  				}
  				this.userInfo=res.data.data;
  				sessionStorage.setItem("localUser",JSON.stringify(res.data.data))
	  		}else{
	  			this.$message.error(res.data.retMsg);
	  		}
	       
	       

	      });
    },
 	fetchData(init) {
    //获取个人钱包列表
      this.loading = true;
      /*if(!this.$_has([users.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          userId:this.userId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
        };
        console.log(para)
      users.getUserWallet.r(para).then((res) => {
        console.log(res);
        if(res.data.retCode==1){           
            
            if(res.data.data.list.length>0){
              // this.total=res.data.data.totalRow;
              this.walletList = res.data.data.list;
             
            }
        }else{
          this.$message.error(res.data.retMsg);
        }
       

        this.loading = false;
      });
    },
    fetchDataCurr() {
    //获取币列表
      this.loading = true;   

      currency.request.r().then((res) => {
        console.log(res);
        if(res.data.retCode==1){           
            
            if(res.data.data.list.length>0){
              this.coinList = res.data.data.list;
              this.coinList.map(x=>{
                this.$set(x,'isSelect',false)  
                      
              })
              this.coinList[0].isSelect=true;
              this.selectCoinsId=this.coinList[0].coinId;
            }
        }else{
          this.$message.error(res.data.retMsg);
        }
       

        this.loading = false;
      });
    },
 
  },
	watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": function(){
        this.routerPath=this.$route.path.split("/").pop();
        this.fetchDataUser()

      }
  },
  created() {
    this.routerPath=this.$route.path.split("/").pop();
    this.userId=sessionStorage.getItem('userId')
    
    this.fetchData();
    this.fetchDataCurr();
    this.fetchDataUser();
  }
};
</script>
